<!DOCTYPE html>
<html>
<head>
	<title>Sortable Table using Polymer Web Components</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<script src="../../platform/platform.js"></script>
	<link rel="import" href="../sortable-table.html">
	<link rel="import" href="index-links.html">

	<style shim-shadowdom>
		sortable-table { width: 500px; margin-left: 65px; }
		sortable-table::shadow td.column-alice,
		sortable-table::shadow td.column-bill,
		sortable-table::shadow td.column-casey,
		sortable-table::shadow td.column-average,
		sortable-table::shadow td.column-total {
			text-align: right;
			padding-right: 5px;
			width: 100px;
			vertical-align: middle;
		}
	</style>
</head>
<body unresolved>

	<h2>Data Formats</h2>

	Table data can be loaded using the <code>data</code> attribute, or by in-lining valid <a href="http://json.org/" target="_blank">JSON</a> between the <code>sortable-table</code> tags.

	<p>

	<h3>Inlined Content</h3>

	<pre>
	&lt;sortable-table&gt;
	[
		{ "fruit":"apple",	"alice": 4,	"bill": 10,	"casey": 2 },
		{ "fruit":"banana",	"alice": 0,	"bill": 4,	"casey": 0 },
		{ "fruit":"grape",	"alice": 2,	"bill": 3,	"casey": 5 },
		{ "fruit":"pear",	"alice": 4,	"bill": 2,	"casey": 8 },
		{ "fruit":"strawberry",	"alice": 0,	"bill": 14,	"casey": 0 }
	]
	&lt;/sortable-table&gt;
	</pre>

	<p>

	<sortable-table defaultStyle>
	[
		{ "fruit":"apple",		"alice": 4,	"bill": 10,	"casey": 2 },
		{ "fruit":"banana",		"alice": 0,	"bill": 4,	"casey": 0 },
		{ "fruit":"grape",		"alice": 2,	"bill": 3,	"casey": 5 },
		{ "fruit":"pear",		"alice": 4,	"bill": 2,	"casey": 8 },
		{ "fruit":"strawberry",	"alice": 0,	"bill": 14,	"casey": 0 }
	]
	</sortable-table>

	<p>

	<h3>DOM</h3>

	<pre>
	&lt;sortable-table&gt;
		&lt;sortable-column&gt;fruit&lt;/sortable-column&gt;
		&lt;sortable-column&gt;alice&lt;/sortable-column&gt;
		&lt;sortable-column&gt;bill&lt;/sortable-column&gt;
		&lt;sortable-column&gt;casey&lt;/sortable-column&gt;
		[
			[ "apple", 4, 10, 2 ],
			[ "banana", 0, 4, 0 ],
			[ "grape", 2, 3, 5 ],
			[ "pear", 4, 2, 8 ],
			[ "strawberry", 0, 14, 0 ]
		]
	&lt;/sortable-table&gt;
	</pre>

	<sortable-table defaultStyle>
		<sortable-column>fruit</sortable-column>
		<sortable-column>alice</sortable-column>
		<sortable-column>bill</sortable-column>
		<sortable-column>casey</sortable-column>
		[
			[ "apple", 4, 10, 2 ],
			[ "banana", 0, 4, 0 ],
			[ "grape", 2, 3, 5 ],
			[ "pear", 4, 2, 8 ],
			[ "strawberry", 0, 14, 0 ]
		]
	</sortable-table>

	<p>

	<h3>Simple Attributes</h3>

	While binding full <a href="http://json.org/" target="_blank">JSON</a> objects to attributes may be necessary for advanced operation, the custom element is smart enought to figure things out if given simple arrays.<br>
	If the <code>data</code> is specifies as Arrays and not Objects, be sure to specify <code>columns</code> as well otherwise column headers will be the integers 0 to N.

	<pre>
	&lt;sortable-table columns='["fruit","alice","bill","casey"]' data='[
		[ "apple", 4, 10, 2 ],
		[ "banana", 0, 4, 0 ],
		[ "grape", 2, 3, 5 ],
		[ "pear", 4, 2, 8 ],
		[ "strawberry", 0, 14, 0 ] ]'&gt;
	&lt;/sortable-table&gt;
	</pre>

	<sortable-table defaultStyle columns='["fruit","alice","bill","casey"]' data='[
		[ "apple", 4, 10, 2 ],
		[ "banana", 0, 4, 0 ],
		[ "grape", 2, 3, 5 ],
		[ "pear", 4, 2, 8 ],
		[ "strawberry", 0, 14, 0 ]
	]'>
	</sortable-table>

	<p>Or mix simple attributes with inlined content:</p>

	<pre>
	&lt;sortable-table columns='["fruit","alice","bill","casey"]'&gt;
	[
		[ "apple", 4, 10, 2 ],
		[ "banana", 0, 4, 0 ],
		[ "grape", 2, 3, 5 ],
		[ "pear", 4, 2, 8 ],
		[ "strawberry", 0, 14, 0 ]
	]
	&lt;/sortable-table&gt;
	</pre>

	<sortable-table defaultStyle columns='["fruit","alice","bill","casey"]'>
	[
		[ "apple", 4, 10, 2 ],
		[ "banana", 0, 4, 0 ],
		[ "grape", 2, 3, 5 ],
		[ "pear", 4, 2, 8 ],
		[ "strawberry", 0, 14, 0 ]
	]
	</sortable-table>

	<h3>Javascript</h3>

	While more advanced Javascript binding is possible, loading data into the component can be as simple as assignment of a JSON array.

	<pre>
	&lt;script&gt;
		window.addEventListener('polymer-ready', function(){
			document.getElementById('mytable').data = [
			  { "fruit":"apple",		"alice": 4,	"bill": 10,	"casey": 2 },
			  { "fruit":"banana",		"alice": 0,	"bill": 4,	"casey": 0 },
			  { "fruit":"grape",		"alice": 2,	"bill": 3,	"casey": 5 },
			  { "fruit":"pear",		"alice": 4,	"bill": 2,	"casey": 8 },
			  { "fruit":"strawberry",	"alice": 0,	"bill": 14,	"casey": 0 }
			];
		});
	&lt;/script&gt;
	&lt;sortable-table id="mytable"&gt;&lt;/sortable-table&gt;
	</pre>
	<script>
	window.addEventListener('polymer-ready', function(){
	document.getElementById('mytable').data = 	[
		{ "fruit":"apple",		"alice": 4,	"bill": 10,	"casey": 2 },
		{ "fruit":"banana",		"alice": 0,	"bill": 4,	"casey": 0 },
		{ "fruit":"grape",		"alice": 2,	"bill": 3,	"casey": 5 },
		{ "fruit":"pear",		"alice": 4,	"bill": 2,	"casey": 8 },
		{ "fruit":"strawberry",	"alice": 0,	"bill": 14,	"casey": 0 }
	];});
	</script>
	<sortable-table defaultStyle id="mytable"></sortable-table>

	<index-links page="data-formats.html"></index-links>
</body>
</html>